import { createStyles, Theme } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
import * as React from "react"
import HeroTile from "./hero-tile"
import mobile from "./mobile.png"
import pc from "./pc.png"
import contact from "./contact.png"

const useStyles = makeStyles((theme: Theme) => createStyles({
  icon: {
    width: "32px",
  },
}))


export default function HeroTiles() {
  const classes = useStyles()

  const mobileIcon = <img src={mobile} alt="" className={classes.icon}/>
  const pcIcon = <img src={pc} alt="" className={classes.icon}/>
  const contactIcon = <img src={contact} alt="" className={classes.icon}/>

  return (<>
    <HeroTile icon={mobileIcon} title="mall-h5" description="前台H5演示网站" tertiary="立即观看"/>
    <HeroTile icon={pcIcon} title="mall-store" description="商家后台演示网站" tertiary="立即观看"/>
    <HeroTile icon={contactIcon} title="寻求支持？" description="我们钟爱消除相应时间。" tertiary="联系我们"/>
  </>)
}
